let addItem = document.querySelector('.address-con').children
function updateAddress(){
    let addr = localStorage.getItem('addressO')
    if (addr) {
        document.querySelector('.address-con').innerHTML = addr
    }
}
updateAddress()
Array.from(addItem).forEach((v, i) => {

    v.onclick = function () {
        if (v.id == 'add-address') {
            let index = layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                skin: '',
                content: `
                <div class="con">
                <div class="title">
                    <div class="title-address">
                        添加收获地址
                    </div>
                    <div class="closeIcon">
                        <div style="width: 13px; height: 13px; cursor: default;"><svg fill="#ccc"
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
                                <path
                                    d="M32.5.68,18,15.17,3.5.68A2,2,0,0,0,.68,3.5L15.17,18,.68,32.5A2,2,0,0,0,3.5,35.32L18,20.83,32.5,35.32a2,2,0,0,0,2.82-2.82L20.83,18,35.32,3.5A2,2,0,0,0,32.5.68Z">
                                </path>
                            </svg></div>
                    </div>
                </div>
                <div class="lines"></div>
                <div class="input-box">
                    <div class="input-u"><input type="text" placeholder="姓名" class="m-input default userName"  value="">
                        <div class="hint default"> </div>
                    </div>
                    <div class="input-u"><input type="tel" placeholder="手机号" class="m-input default phoneNum" value="">
                        <div class="hint default"> </div>
                    </div>
                </div>
                <div class="input-box2">
                    <div class="input-u"><input type="text" placeholder="四川省／成都市／武侯区区／肖家河街道" class="m-input default" readonly=""
                            value="">
                        <div class="hint default"> </div>
                    </div>
                </div>
                <div class="input-box2">
                    <div class="input-u"><textarea type="text" placeholder="详细地址" class="default text-arr"></textarea>
                        <div class="hint default"> </div>
                    </div>
                </div>
                <div class="input-box3">
                    <div class="input-u"><input type="text" placeholder="邮政编号" class="m-input i-text default" readonly=""
                            value="610041">
                        <div class="hint default"> </div>
                    </div>
                    <div class="m-checkbox">
                        <div style="width: 18px; height: 18px; display: inline-block; cursor: default;">
                        </div>
                    </div>
                </div>
                <div class="submit-box"><a class="submit-center m-btns m-btn-lg m-btn-brown save" href="javascript:;">保存</a><a class="submit-margin submit-center m-btns m-btn-lg m-btn-brown cancel" href="javascript:;">取消</a></div>
                `

            });
            let userWo = {}
            let phoneNumObj = document.querySelector('.phoneNum')
            let phoneNum = ''
            let one = ''
            let two = ''
            let three = ''
            phoneNumObj.onblur = function () {
                phoneNum = phoneNumObj.value
                let reg1 = /^[1]{1}[0-9]{10}$/
                if (phoneNum != 0 && reg1.test(phoneNum)) {
                    phoneNumObj.nextElementSibling.style.opacity = 0
                    two = phoneNum
                } else {
                    phoneNumObj.nextElementSibling.style.opacity = 1
                    phoneNumObj.nextElementSibling.style.color = 'red'
                    phoneNumObj.nextElementSibling.innerHTML = '请输入正确的手机号'
                }

            }
            let userNameObj = document.querySelector('.userName')
            let userName = ''

            userNameObj.onblur = function () {
                userName = userNameObj.value
                let reg2 = /^([\u4e00-\u9fa5]|\w){2,20}$/
                if (userName != 0 && reg2.test(userName)) {
                    userNameObj.nextElementSibling.style.opacity = 0
                    one = userName
                } else {
                    userNameObj.nextElementSibling.style.opacity = 1
                    userNameObj.nextElementSibling.style.color = 'red'
                    userNameObj.nextElementSibling.innerHTML = '用户名不得低于两位'
                }

            }
            let addressObj = document.querySelector('.text-arr')
            let address = ''
            addressObj.onblur = function () {
                address = addressObj.value
                if (address != 0) {
                    addressObj.nextElementSibling.style.opacity = 0
                    three = address
                } else {
                    addressObj.nextElementSibling.style.opacity = 1
                    addressObj.nextElementSibling.style.color = 'red'
                    addressObj.nextElementSibling.innerHTML = '地址不能为空'
                }

            }
            document.querySelector('.cancel').onclick = function () {
                layer.close(index)
            }


            document.querySelector('.save').onclick = function () {
                if (one && two && three) {
                    let oldHtml = document.querySelector('.address-con').innerHTML
                    two=two.replace(/^(\d{4})\d{4}(\d+)/,"$1****$2")

                    let html = ''
                    html = ` <div class="address-item" address-id=${i}>
                       <div class="address-container">
                         <div class="address-name">${one}</div>
                         <div class="address-tel">${two}</div>
                         <div class="address-city">四川(成都)武侯区肖家河街道</div>
                         <div class="address-add">${three}</div>
                         <div class="address-city">610041</div>
                       </div>
                       <div class="update">
                           <span class="updateFn">修改</span>
                           <span class="deleteFn">删除</span>
                       </div>
                     </div>`
                    html = html + oldHtml

                    localStorage.setItem('addressO', html)
                    document.querySelector('.address-con').innerHTML = html
                    layer.close(index)
                    updateAddress()
                    
                }
                location.reload()
            }
          
        }

        

    }
    v.onmouseover = function () {
        v.children[1].style.opacity = 1
    }
    v.onmouseout = function () {
        v.children[1].style.opacity = 0
    }
})
if (document.querySelectorAll('[address-id]')) {
    let update = document.querySelectorAll('[address-id]')
    update.forEach((v,i) => {
            v.onclick = function (e) {
                let idss=v.getAttribute('address-id')
                if (e.target.className == 'updateFn') {
                    let indexw = layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        shadeClose: true,
                        skin: '',
                        content: `
                        <div class="con">
                        <div class="title">
                            <div class="title-address">
                                添加收获地址
                            </div>
                            <div class="closeIcon">
                                <div style="width: 13px; height: 13px; cursor: default;"><svg fill="#ccc"
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
                                        <path
                                            d="M32.5.68,18,15.17,3.5.68A2,2,0,0,0,.68,3.5L15.17,18,.68,32.5A2,2,0,0,0,3.5,35.32L18,20.83,32.5,35.32a2,2,0,0,0,2.82-2.82L20.83,18,35.32,3.5A2,2,0,0,0,32.5.68Z">
                                        </path>
                                    </svg></div>
                            </div>
                        </div>
                        <div class="lines"></div>
                        <div class="input-box">
                            <div class="input-u"><input type="text" placeholder="姓名" class="m-input default userName"  value="">
                                <div class="hint default"> </div>
                            </div>
                            <div class="input-u"><input type="tel" placeholder="手机号" class="m-input default phoneNum" value="">
                                <div class="hint default"> </div>
                            </div>
                        </div>
                        <div class="input-box2">
                            <div class="input-u"><input type="text" placeholder="四川省／成都市／武侯区区／肖家河街道" class="m-input default" readonly=""
                                    value="">
                                <div class="hint default"> </div>
                            </div>
                        </div>
                        <div class="input-box2">
                            <div class="input-u"><textarea type="text" placeholder="详细地址" class="default text-arr"></textarea>
                                <div class="hint default"> </div>
                            </div>
                        </div>
                        <div class="input-box3">
                            <div class="input-u"><input type="text" placeholder="邮政编号" class="m-input i-text default" readonly=""
                                    value="610041">
                                <div class="hint default"> </div>
                            </div>
                            <div class="m-checkbox">
                                <div style="width: 18px; height: 18px; display: inline-block; cursor: default;">
                                </div>
                            </div>
                        </div>
                        <div class="submit-box"><a class="submit-center m-btns m-btn-lg m-btn-brown save" href="javascript:;">保存</a><a class="submit-margin submit-center m-btns m-btn-lg m-btn-brown cancel" href="javascript:;">取消</a></div>
                        `
        
                    });
                    let userWo = {}
                    let phoneNumObj = document.querySelector('.phoneNum')
                    let phoneNum = ''
                    let one = ''
                    let two = ''
                    let three = ''
                    phoneNumObj.onblur = function () {
                        phoneNum = phoneNumObj.value
                        let reg1 = /^[1]{1}[0-9]{10}$/
                        if (phoneNum != 0 && reg1.test(phoneNum)) {
                            phoneNumObj.nextElementSibling.style.opacity = 0
                            two = phoneNum
                        } else {
                            phoneNumObj.nextElementSibling.style.opacity = 1
                            phoneNumObj.nextElementSibling.style.color = 'red'
                            phoneNumObj.nextElementSibling.innerHTML = '请输入正确的手机号'
                        }
        
                    }
                    let userNameObj = document.querySelector('.userName')
                    let userName = ''
        
                    userNameObj.onblur = function () {
                        userName = userNameObj.value
                        let reg2 = /^([\u4e00-\u9fa5]|\w){2,20}$/
                        if (userName != 0 && reg2.test(userName)) {
                            userNameObj.nextElementSibling.style.opacity = 0
                            one = userName
                        } else {
                            userNameObj.nextElementSibling.style.opacity = 1
                            userNameObj.nextElementSibling.style.color = 'red'
                            userNameObj.nextElementSibling.innerHTML = '用户名不得低于两位'
                        }
        
                    }
                    let addressObj = document.querySelector('.text-arr')
                    let address = ''
                    addressObj.onblur = function () {
                        address = addressObj.value
                        if (address != 0) {
                            addressObj.nextElementSibling.style.opacity = 0
                            three = address
                        } else {
                            addressObj.nextElementSibling.style.opacity = 1
                            addressObj.nextElementSibling.style.color = 'red'
                            addressObj.nextElementSibling.innerHTML = '地址不能为空'
                        }
        
                    }
                    document.querySelector('.cancel').onclick = function () {
                        layer.close(indexw)
                    }
        
                   
                    document.querySelector('.save').onclick = function () {
                        
                        if (one && two && three) {
                            document.querySelector('.address-con').removeChild(document.querySelector(`[address-id='${idss}']`))
                            let dataf=document.querySelector('.address-con').innerHTML
                            localStorage.setItem('addressO',dataf)
                            let oldHtml = document.querySelector('.address-con').innerHTML
                            two=two.replace(/^(\d{4})\d{4}(\d+)/,"$1****$2")
                            let html = ''
                            html = ` <div class="address-item" address-id=${idss}>
                               <div class="address-container">
                                 <div class="address-name">${one}</div>
                                 <div class="address-tel">${two}</div>
                                 <div class="address-city">四川(成都)武侯区肖家河街道</div>
                                 <div class="address-add">${three}</div>
                                 <div class="address-city">610041</div>
                               </div>
                               <div class="update">
                                   <span class="updateFn">修改</span>
                                   <span class="deleteFn">删除</span>
                               </div>
                             </div>`
                            html = html + oldHtml
                            
                            localStorage.setItem('addressO', html)
                            document.querySelector('.address-con').innerHTML = html
                            layer.close(indexw)
                            updateAddress()
                        }
                        location.reload()
                    }
                }
                if(e.target.className=="deleteFn"){
                    layer.confirm('是否删除？', {
                        btn: ['确定', '取消'] 
                      }, function (index) {
                        layer.close(index);
                        
                        document.querySelector('.address-con').removeChild(document.querySelector(`[address-id='${idss}']`))
                        let data=document.querySelector('.address-con').innerHTML
                        localStorage.setItem('addressO',data)
                        updateAddress()
                        location.reload()
                      });
                     
                }
            }

        

    })
}